import React, { Component } from 'react'
import { Card, Rate, Pagination,Spin  } from 'antd'
const { Meta } = Card

export default class about extends Component {
  constructor(props) {
    super()
    this.state = {
      listData: [],
      type: props.match.params.type,
      count: 10,
      page: props.match.params.page,
      flag: true,
      total: 0
    }
  }
  componentWillMount() {
    this.getListData()
  }
  render() {
    return (
      <div style={ {textAlign:'center'} }>
        { 
          this.state.flag ?  <Spin size="large" /> : <div>
            <div style={ { display:'flex','flexWrap':'wrap'}}>
              {
                this.state.listData.map(item=>{
                  return <Card
                    hoverable
                    key={item.id}
                    style={{ width: 210, margin:6 }}
                    onClick={()=>this.goDetail(item.id)}
                    cover={<img alt="example" src={item.images.small} style={ {width:'100%',height: '100%'}}/>}
                  >
                    <Meta
                      title={item.title}
                    />
                    <Rate disabled defaultValue={item.rating.average / 2} />
                  </Card>
                })
              }
            </div>
            <Pagination defaultCurrent={parseInt(this.state.page)} total={parseInt(this.state.total)} onChange={this.changePage}/>
          </div>
        }
      </div>
     
    )
  }
  componentWillReceiveProps(nextProps) {
    console.log(nextProps)
    this.setState({
      type: nextProps.match.params.type,
      page: nextProps.match.params.page,
      flag: true
    },function(){
      this.getListData()
    })  
  }

  getListData = async () => {
    let start = (this.state.page - 1) * 10
    let result = await this.$http(`${this.baseURL}/v2/movie/${this.state.type}?start=${start}&count=${this.state.count}`)
    let data = await result.json()
    this.setState({
      listData: data.subjects,
      flag: false,
      total: data.total
    })
  }

  changePage = (page) => {
    this.props.history.push(`/movie/${this.state.type}/${page}`)
  }

  goDetail = (id) => {
    this.props.history.push(`/movie/detail/${id}`)
  }
}
